<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 图片样式从这里开始 */
			.gallery {
				width: 790px;
				margin: 30px auto;
				padding: 5px;
				background: #333;
			}
			
			.gallery>div {
				position: relative;
				float: left;
				padding: 5px;
			}
			
			.gallery>div>img {
				width: 250px;
				/*transition: .1s transform;*/
				/*transform: translateZ(0);*/
				/* hack */
			}
			
			/* div移上去在Z轴的正方向1px */
			.gallery>div:hover {
				z-index: 1;
			}
			
			/* 鼠标移到上面变换 */
			.gallery>div:hover>img {
				/* 增大为1.5倍 */
				transform: scale(1.5,1.5);
				/* 变换时间 */
				transition: 0.5s transform;
			}
			
			.cf:before,.cf:after {
				display: table;
				content: "";
				line-height: 0;
			}
			
			.cf:after {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="gallery cf">
			<div>
				<img src="../img/landscape-test-1_1x.jpg" />
			</div>
			<div>
				<img src="../img/iceberg_1x.jpg" />
			</div>
			<div>
				<img src="../img/igloo-800_1x.jpg" />
			</div>
			<div>
				<img src="../img/trees_1x.jpg" />
			</div>
			<div>
				<img src="../img/space_1x.jpg" />
			</div>
			<div>
				<img src="../img/render1_1x.jpg" />
			</div>
		</div>
	</body>
</html>
